import { useMemo, type CSSProperties } from "react";
import { Tooltip } from "antd";
// import { getPopupContainer } from "@/utils";
import { isArray, isString } from "@/utils/is";
import { childrenToMap, getSlot } from "@/utils/helper/tsxHelper";
import { Icon } from "@/components/Icon";
import "../style/BasicHelp.less";

interface BasicHelpPropsType {
	/**
	 * Help text max-width
	 * @default: 600px
	 */
	maxWidth?: string;
	/**
	 * Whether to display the serial number
	 * @default: false
	 */
	showIndex?: boolean;
	/**
	 * Help text font color
	 * @default: #ffffff
	 */
	color?: string;
	/**
	 * Help text font size
	 * @default: 14px
	 */
	fontSize?: string;
	/**
	 * Help text list
	 */
	placement?: string;
	/**
	 * Help text list
	 */
	text?: string[] | string | JSX.Element;
}

const BasicHelpPropsDefault = {
	maxWidth: "600px",
	color: "#ffffff",
	fontSize: "14px",
	placement: "right"
};

export default function BasicHelp(props: BasicHelpPropsType & ComponentNode) {
	props = Object.assign({}, { ...BasicHelpPropsDefault, ...props });

	const slots = childrenToMap(props.children);
	const getTooltipStyle = useMemo(
		(): CSSProperties => ({ color: props.color, fontSize: props.fontSize }),
		[props.color, props.fontSize]
	);

	const getOverlayStyle = useMemo((): CSSProperties => ({ maxWidth: props.maxWidth }), [props.maxWidth]);

	function renderTitle() {
		const textList = props.text;

		if (isString(textList)) return <p>{textList}</p>;

		if (isArray(textList)) {
			return textList.map((text, index) => {
				return (
					<p key={text}>
						<>
							{props.showIndex ? `${index + 1}. ` : ""}
							{text}
						</>
					</p>
				);
			});
		}
		return <div>{textList}</div>;
	}

	return (
		<Tooltip
			overlayClassName="overlay-class"
			title={<div style={getTooltipStyle}>{renderTitle()}</div>}
			autoAdjustOverflow={true}
			overlayStyle={getOverlayStyle}
			placement={props.placement as "right"}
			// getPopupContainer={() => getPopupContainer()}
		>
			<span className="ml-1.5 inline-block cursor-pointer text-sm">
				{getSlot(slots) || <Icon icon="ant-design:info-circle-outlined" />}
			</span>
		</Tooltip>
	);
}
